<html xmlns="http://www.w3c.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">  
    <h:head>
        <script src="${pageContext.request.contextPath}/SimuladorICETEX/resources/js/autoNumeric.js" type="text/javascript"/>
        <script type="text/javascript">
            jQuery(function($) {
                $("#form\\:txtMatricula").autoNumeric('init', {aSep: '.', aDec: ',', aSign: '$ '});
            });
        </script>
        <style>
            .texto-derecha{
                text-align: right;
            }
            .tabla-datos tr:hover { background: #F0F0F0; }
        </style>
    </h:head>  
    <h:body> 
        <h:form id="form">
            <p:panel header="#{msg.label_datos_entrada}">   
                <table style="margin: auto;">
                    <thead>
                        <tr>
                            <th colspan="2"><p:messages id="messages" showDetail="false" autoUpdate="true" closable="true" /></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_estrato}"/></td>
                            <td><p:selectOneMenu required="true" value="#{simuladorMB.datosEntrada.estrato}">
                                    <f:selectItems 
                                        value="#{simuladorMB.estratoList}"
                                        var="est"
                                        itemLabel="#{est.toString()}"
                                        itemValue="#{est}"/>
                                </p:selectOneMenu>
                            </td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_valorMatricula}"/></td>
                            <td>
                                <p:inputText id="txtMatricula" value="#{simuladorMB.datosEntrada.matricula}" maxlength="8" required="true" requiredMessage="#{msg.valor_matricula_requerido}">
                                    <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                </p:inputText>
                            </td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_fechaIngreso}"/></td>
                            <td>
                                <p:calendar value="#{simuladorMB.datosEntrada.fechaIngreso}" id="popupCal" required="true" requiredMessage="#{msg.fecha_ingreso_requerido}" effect="fold" pattern="#{msg.formato_fecha}" navigator="true" locale="es"></p:calendar>
                            </td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_semestreIngreso}"/></td>
                            <td><p:spinner id="txtSemestreIng" value="#{simuladorMB.datosEntrada.nroSemestreIngreso}" required="true" requiredMessage="#{msg.semestre_inicio_requerido}" maxlength="2" min="1" max="12"/></td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_semestreTermina}"/></td>
                            <td><p:spinner id="txtSemestreSal" value="#{simuladorMB.datosEntrada.nroSemestreFinal}" required="true" maxlength="2" min="1" max="12" requiredMessage="#{msg.semestre_fin_requerido}"/></td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_fechafocal}"/></td>
                            <td><p:outputLabel value="#{simuladorMB.resultado.fechaFocal}"/></td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_tasaInteres}"/></td>
                            <td class="texto-derecha">
                                <h:outputText value="#{simuladorMB.params.tasaInteresSimple}">
                                    <f:convertNumber type="percent"/>
                                </h:outputText>
                            </td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_IPC}"></p:outputLabel></td>
                            <td class="texto-derecha">
                                <h:outputText value="#{simuladorMB.params.IPC}">
                                    <f:convertNumber type="percent"/>
                                </h:outputText>
                            </td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_tasaanual}"/></td>
                            <td class="texto-derecha">
                                <h:outputText value="#{simuladorMB.params.tasaAumento}">
                                    <f:convertNumber type="percent"/>
                                </h:outputText>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="margin: auto;text-align: center;">
                                <p:commandButton value="#{msg.consultar}"  action="#{simuladorMB.ejecutarConsulta}" update="dttPrestamo,dttAmortizacion,pnlResultado"/>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <p:panel id="pnlResultado" visible="false" header="#{msg.header_resultado}">

                    <table style="margin: auto;">
                        <tr>
                            <td><p:outputLabel value="#{msg.header_cuota}:"></p:outputLabel> </td>
                            <td class="texto-derecha"><h:outputText value="#{simuladorMB.resultado.valorCuota}"><f:convertNumber pattern="#{msg.formato_moneda}"/></h:outputText> </td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.header_intereses}:"></p:outputLabel> </td>
                            <td class="texto-derecha"><h:outputText value="#{simuladorMB.resultado.valorInterePrestado}"><f:convertNumber pattern="#{msg.formato_moneda}"/></h:outputText> </td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_valor_total_desembolso}"></p:outputLabel> </td>
                            <td class="texto-derecha"><h:outputText value="#{simuladorMB.resultado.valorPrestadoMasIntereses}"><f:convertNumber pattern="#{msg.formato_moneda}"/></h:outputText> </td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.header_noCuotas}:"></p:outputLabel> </td>
                            <td class="texto-derecha"><p:outputLabel value="#{simuladorMB.resultado.numeroCuotas}"></p:outputLabel> </td>
                        </tr>
                        <tr>
                            <td><p:outputLabel value="#{msg.label_valor_total_pagado}"></p:outputLabel> </td>
                            <td class="texto-derecha"><h:outputText value="#{simuladorMB.resultado.valorTotalPagado}"><f:convertNumber pattern="#{msg.formato_moneda}"/></h:outputText> </td>
                        </tr>


                    </table>

                    <p:panel id="pnlResultadoP" header="#{msg.header_resultado_prestamo}">
                        <p:dataTable id="dttPrestamo" var="prestamo" value="#{simuladorMB.resultado.listaPrestamo}" emptyMessage="Sin valores" style="text-align: center;" styleClass="tabla-datos">
                            <p:column headerText="#{msg.header_semestres}" styleClass="texto-derecha">
                                <h:outputText value="#{prestamo.semestre}"></h:outputText>
                            </p:column>
                            <p:column headerText="#{msg.header_fecha}" footerText="#{msg.footer_total}" styleClass="texto-derecha">
                                <h:outputText value="#{prestamo.fecha}">
                                    <f:convertDateTime pattern="#{msg.formato_fecha}"/>
                                </h:outputText>
                            </p:column>
                            <p:column headerText="#{msg.header_vl_desembolso}" styleClass="texto-derecha">
                                <h:outputText value="#{prestamo.valorDesembolso}">
                                    <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                </h:outputText>
                                <f:facet name="footer">  
                                    <h:outputText value="#{simuladorMB.resultado.valorPrestado}">
                                        <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                    </h:outputText>
                                </f:facet>
                            </p:column>
                            <p:column headerText="#{msg.header_interes}" styleClass="texto-derecha">
                                <h:outputText value="#{prestamo.valorInteres}">
                                    <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                </h:outputText>
                                <f:facet name="footer">  
                                    <h:outputText value="#{simuladorMB.resultado.valorInterePrestado}">
                                        <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                    </h:outputText>
                                </f:facet>
                            </p:column>
                            <p:column headerText="#{msg.header_valor_total}" styleClass="texto-derecha">
                                <h:outputText value="#{prestamo.valorDesembolsoInteres}">
                                    <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                </h:outputText>
                                <f:facet name="footer">  
                                    <h:outputText value="#{simuladorMB.resultado.valorPrestadoMasIntereses}">
                                        <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                    </h:outputText>
                                </f:facet>
                            </p:column>
                        </p:dataTable>
                    </p:panel>
                    <p:panel id="pnlResultadoA" header="#{msg.header_resultado_amprtizacion}">
                        <p:dataTable id="dttAmortizacion" var="amortizacion" value="#{simuladorMB.resultado.listaAmortizacion}" emptyMessage="Sin valores" style="text-align: center;" styleClass="tabla-datos">
                            <p:column headerText="#{msg.header_nro_periodos}" styleClass="texto-derecha">
                                <h:outputText value="#{amortizacion.periodo}"></h:outputText>
                            </p:column>
                            <p:column headerText="#{msg.header_capital}" footerText="#{msg.footer_total}" styleClass="texto-derecha">
                                <h:outputText value="#{amortizacion.capital}">
                                    <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                </h:outputText>
                            </p:column>
                            <p:column headerText="#{msg.header_intereses}" styleClass="texto-derecha">
                                <h:outputText value="#{amortizacion.intereses}">
                                    <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                </h:outputText>
                                <f:facet name="footer">  
                                    <h:outputText value="#{simuladorMB.resultado.valorInteresesAmortizacion}">
                                        <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                    </h:outputText>
                                </f:facet>
                            </p:column>
                            <p:column headerText="#{msg.header_amortizacion}" styleClass="texto-derecha">
                                <h:outputText value="#{amortizacion.amortizacion}">
                                    <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                </h:outputText>
                            </p:column>
                            <p:column headerText="#{msg.header_cuota}" styleClass="texto-derecha">
                                <h:outputText value="#{amortizacion.cuota}">
                                    <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                </h:outputText>
                            </p:column>
                            <p:column headerText="#{msg.header_saldo}" styleClass="texto-derecha">
                                <h:outputText value="#{amortizacion.saldo}">
                                    <f:convertNumber pattern="#{msg.formato_moneda}"/>
                                </h:outputText>
                            </p:column>
                        </p:dataTable>
                    </p:panel>
                </p:panel>
            </p:panel>
        </h:form>
    </h:body>   
</html>  